<template>
  <div class="sale">
    <!-- 总销售额 -->
    <h2>销售数据统计</h2>
    <div class="box">
      <div class="stat-item">
        <p class="item">总销售额</p>
        <img src="../../assets/icons/up.png" alt="">
        <p class="value">￥{{ totalSales }}</p>
        <p class="change">{{ salesChange }} <span>同比上周</span></p>
      </div>
      <!-- 访问人数 -->
      <div class="stat-item">
        <p class="item">访问人数</p>
        <img src="../../assets/icons/people.png" alt="">
        <p class="value">{{ visitorCount }}</p>
        <p class="change">{{ visitorChange }} <span>同比上周</span></p>
      </div>
      <!-- 订单数量 -->
      <div class="stat-item">
        <p class="item">订单数量</p>
        <img src="../../assets/icons/buy.png" alt="">
        <p class="value">{{ orderCount }}</p>
        <p class="change">{{ orderChange }} <span>同比上周</span></p>
      </div>
      <!-- 转化率 -->
      <div class="stat-item">
        <p class="item">转化率</p>
        <img src="../../assets/icons/fen.png" alt="">
        <p class="value">{{ conversionRate }}%</p>
        <p class="change">{{ conversionChange }} <span>同比上周</span></p>
      </div>
    </div>
    <div class="box"> <!-- 销售趋势图表及切换按钮 -->
      <div class="chart-container">
        <h3>销售趋势</h3>
        <div class="tab-buttons">
          <span @click="changeChartData('week')" :class="{ 'active': currentTab === 'week' }">本周</span>
          <span @click="changeChartData('month')" :class="{ 'active': currentTab === 'month' }">本月</span>
          <span @click="changeChartData('year')" :class="{ 'active': currentTab === 'year' }">本年</span>
        </div>
        <div id="sales-trend-chart" style="width: 600px; height: 400px;"></div>
      </div>
      <!-- 热门商品列表 -->
      <div class="popular-goods">
        <h3>热门商品</h3>
        <p>查看更多</p>
        <table>
          <thead>
            <tr>
              <th style="width: 100px;">商品名称</th>
              <th></th>
              <th>销量</th>
              <th>销售额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in popularGoods" :key="index">
              <td><img style="width: 20px;" src="../../assets/icons/icon.png" alt=""></td>
              <td style="width: 300px;">{{ item.name }}</td>
              <td style="width: 150px; ">{{ item.quantity }}</td>
              <td>￥{{ item.sales }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      totalSales: 126560,
      salesChange: '+12%',
      visitorCount: 8846,
      visitorChange: '-5%',
      orderCount: 1286,
      orderChange: '+8%',
      conversionRate: 14.5,
      conversionChange: '+2%',
      // 模拟不同时间段的数据
      weekSalesTrendData: [
        { date: '周一', amount: 15000 },
        { date: '周二', amount: 17000 },
        { date: '周三', amount: 16000 },
        { date: '周四', amount: 20000 },
        { date: '周五', amount: 22000 },
        { date: '周六', amount: 25000 },
        { date: '周日', amount: 28000 }
      ],
      monthSalesTrendData: [
        // 假设的本月数据
        { date: '1 日', amount: 15000 },
        { date: '5 日', amount: 18000 },
        { date: '10 日', amount: 19000 },
        { date: '15 日', amount: 22000 },
        { date: '20 日', amount: 18000 },
        { date: '25 日', amount: 19000 },
        { date: '30 日', amount: 17000 },
        // 更多日期数据...
      ],
      yearSalesTrendData: [
        // 假设的本年数据
        { date: '1月', amount: 510000 },
        { date: '3月', amount: 530000 },
        { date: '5月', amount: 580000 },
        { date: '7月', amount: 590000 },
        { date: '9月', amount: 560000 },
        { date: '11月', amount: 560000 },
        { date: '12月', amount: 570000 },
        // 更多月份数据...
      ],
      salesTrendData: [],
      popularGoods: [
        { name: '智能手机 Pro Max', quantity: 1245, sales: 45680 },
        { name: '无线耳机', quantity: 986, sales: 23450 },
        { name: '智能手表', quantity: 865, sales: 18960 },
        { name: '轻薄笔记本', quantity: 654, sales: 16780 }
      ],
      currentTab: 'week'
    };
  },
  mounted() {
    this.salesTrendData = this.weekSalesTrendData;
    this.drawSalesTrendChart();
  },
  methods: {
    drawSalesTrendChart() {
      console.log('当前图表数据:', this.salesTrendData);
      const chartDom = document.getElementById('sales-trend-chart');
      if (!chartDom) {
        console.error('未找到图表的 DOM 元素');
        return;
      }
      try {
        const myChart = echarts.init(chartDom);
        console.log("myChart", myChart)
        const option = {
          xAxis: {
            type: 'category',
            data: this.salesTrendData.map(item => item.date)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.salesTrendData.map(item => item.amount),
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);
      } catch (error) {
        console.error('Echarts 初始化失败:', error);
      }
    },
    changeChartData(tab) {
      this.currentTab = tab;
      switch (tab) {
        case 'week':
          this.salesTrendData = this.weekSalesTrendData;
          break;
        case 'month':
          this.salesTrendData = this.monthSalesTrendData;
          break;
        case 'year':
          this.salesTrendData = this.yearSalesTrendData;
          break;
      }
      this.drawSalesTrendChart();
    }
  }
};
</script>

<style lang="less" scoped>
.sale {
  padding: 70px 0px 20px 260px;
  background-color: #F9FAFB;
  width: 100%;

  h2 {
    display: block;
    visibility: visible;
    margin-left: 10px;
  }

  .box {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 30px;


    .stat-item {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      width: 260px;
      height: 170px;
      background-color: white;
      box-sizing: border-box;
      border-radius: 10px;
      position: relative;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

      .item {
        margin: 15px;
        color: #7a7a7a;
      }

      img {
        height: 25px;
        width: 25px;
        position: absolute;
        top: 25px;
        right: 30px;
      }

      .value {
        margin: 20px 15px;
        font-size: 20px;
        font-weight: bold;
      }

      .change {
        margin: 20px 15px;
        color: green;

        span {
          color: #7a7a7a;
        }
      }

      .change[class*='-'] {
        color: red;
      }
    }

    .chart-container {
      position: relative;
      margin-top: 10px;
      padding-top: 30px;
      background-color: rgb(255, 255, 255);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      width: 48%;

      h3 {
        position: absolute;
        top: 20px;
        left: 20px;
      }

      .tab-buttons {
        position: absolute;
        top: 20px;
        right: 10px;

        span {
          padding: 8px 10px;
          cursor: pointer;
          border-radius: 3px;
          margin-right: 10px;
        }

        span.active {
          background-color: #007bff;
          color: rgb(255, 255, 255);
          border-color: #007bff;
        }
      }
    }

    .popular-goods {
      position: relative;
      margin-top: 10px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border: 1px solid #e9e8e8;
      background-color: white;
      width: 552px;

      h3 {
        position: absolute;
        top: 20px;
        left: 20px;
      }

      p {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #007bff;
        font-weight: 800;

      }

      table {
        border-collapse: collapse;
        width: 90%;
        margin: 80px auto;
      }

      th {
        border-bottom: 2px solid #ccc;
        padding: 8px;
        text-align: left;
        color: #7a7a7a;
      }

      td {
        border-bottom: 1px solid #ecebeb;
        padding: 15px;
        text-align: left;

      }
    }

  }
}
</style>